<template>
	<view class="container">
		<!-- 轮播 -->
		<swiper indicator-dots autoplay :indicator-dots="false" class="swiper">
		  <swiper-item v-for="(item, index) in bannerList" :key="index">
			<image :src="item"></image>
		  </swiper-item>
		</swiper>
		
		<!-- 新闻推荐 -->
		<view class="box" v-if="tjNewsList.length>0">
			<image src="../../static/img/tj.png" class="tj"></image>
			<view class="newsBox">
				<view v-for="(item, index) in tjNewsList" class="newsItem">
					<view class="Ncontent">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 新闻列表 -->
		<view class="listBox" v-if="newsList.length>0">
			<waterfall ref='waterfall' :list='imgArr'></waterfall>
			<view v-if="!hasMore" class="hasMore">没有更多数据了</view>
		</view>
		<view v-if="newsList.length==0">
			<nullVue></nullVue>
		</view>
		<view style="height: 80rpx;"></view>
	  </view>
</template>

<script>
	import waterfall from '@/components/TPlus-waterfall/TPlus-waterfallt.vue';
	import { bannerList,newsList } from '@/api/news.js';
	import config from '@/config';
	import nullVue from '@/components/null';
	export default {
		components: { waterfall,nullVue },
		data() {
			return {
				imgUrl:config.baseUrl,
				bannerList:[],
				newsList:[],
				tjNewsList:[],
				imgArr:[],
				page: 1, // 当前页数
			    pageSize: 10, // 每页条数
			    hasMore: true, // 是否有更多数据
			}
		},
		onLoad() {
			this.banner();
			this.getNews();
			this.loadImages();
		},
		methods: {
			// 活动banner数据
			banner() {
				let data = {
					num:"5"
				}
				bannerList(data).then((res) => {
					if(res.code==200){
						for (let i = 0; i < res.data.length; i++) { 
						this.bannerList.push(this.imgUrl+res.data[i].image);
						}
					}
				  })
			},
			
			getNews(){
				let data = {
					page: 1, // 当前页数
					pageSize: 20, // 每页条数
				}
				newsList(data).then((res) => {
					if(res.code==200){
						this.newsList = res.data
						if(res.data.length>0){
							for (let i = 0; i < res.data.length; i++) {
								if(res.data[i].switch==1){
									let temp = {
									  id: res.data[i].id,
									  title: res.data[i].title,
									};		
									this.tjNewsList.push(temp);
								}
							}
						}
					}
				  });
			},
			
			// 新闻列表
			loadImages() {
				uni.showLoading({
					title: '加载中'
				});
				//模拟请求数据
				setTimeout(()=>{
					let data = {
						page:this.page,
						pageSize:this.pageSize
					}
					newsList(data).then((res) => {
						if(res.code==200){
							if(res.data.length>0){
								this.hasMore = true
								this.newsList = res.data
								this.imgArr = res.data
							}else{
								this.hasMore = false
							}
							for (let i = 0; i < this.imgArr.length; i++) {
								this.imgArr[i].price = this.imgArr[i].title;
								this.imgArr[i].src = this.imgArr[i].image;
							} 
						}
					  })
				} ,500)
			
			},
			
			// 页面上拉触底事件的处理函数
			onReachBottom: function() {
				// this.num = parseInt(this.num) + 5
				if (this.hasMore&&this.imgArr.length>0) {
				      this.page += 1;
				      this.loadImages();
				}
			},
			onPullDownRefresh: function() {
				// this.num = parseInt(this.num) + 5
				setTimeout(() => {
					this.loadImages()
				    //结束下拉刷新
				    uni.stopPullDownRefresh();
				}, 1000);
			},
			
			// 跳转详情页
			newsShow(id){
				uni.navigateTo({
					url: '../news/show?id='+id,
				});
			}
		}
	}
</script>

<style>
	.container{
		width: 100%;
	}
	
	.swiper{
		height: 330rpx;
	}
	
	.swiper image{
		width: 95%;
		height: 100%;
		border-radius: 10rpx;
	}
	
	.swiper swiper-item{
		border-radius: 10rpx;
		text-align: center;
	}
	
	.swiper1{
		width: 100%;
		height: 40rpx;
		margin-top: 10rpx;
	}
	
	.newsTj{
		border-left: 3px solid #6a8473;
		font-size: 26rpx;
		font-weight: 300;
		margin-top: 10rpx;
		margin-left: 20rpx;
		padding: 5rpx 0 5rpx 10rpx;
	}
	
	.Ncontent{
		overflow: hidden; 
		white-space: nowrap; 
		text-overflow: ellipsis;
		font-size: 24rpx;
	}
	
	.box{
		border: 1px solid #6a8473;
		width: 94%;
		margin: 20rpx auto 20rpx;
		/* padding: 10rpx; */
		position: relative;
	}
	
	.newsItem{
		line-height: 44rpx;
		padding-left: 28rpx;
	}
	
	.tj{
		position: absolute;
		top: 0;
		left: -2rpx;
		width: 55rpx;
		height: 55rpx;
	}
	
	.newsBox{
		margin-top: 22rpx;
		font-weight: 300rpx;
	}
	
	.listBox{
		padding: 0 10rpx;
	}
	
	.hasMore{
		color: #ddd;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}
</style>